<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        html,body{
            width: 500px;
            height: 250px;
            padding: 0;
            margin: 0;
			overflow:hidden
        }
        .box{
            padding: 0;
            width: 500px;
            height: 250px;
            overflow: hidden;
        }
        .leftBox,.rightBox{
            width: 250px;
            height: 250px;
            float: left;
            position: relative;
        }
        .leftBox img{
            width: 250px;
            height: 250px;
            position: absolute;
        }
        .rightBox{
            overflow: hidden;
            display: none;
        }
        .rightBox img{
            width: 500px;
            height: 500px;
            position: absolute;
            left: 0;
            top: 0;
        }
        #mask{
            width: 125px;
            height: 125px;
            position: absolute;  
            background:rgb(255 193 7 / 26%);  
            left: 0;
            top: 0;
            display: none;
            cursor: move;
        }
    </style>
    <div class="box">
        <div class="leftBox">
            <img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic2@main/image/imageme2.jpg" alt="">
            <div id="mask"></div>
        </div>
        <div class="rightBox">
            <img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic2@main/image/imageme2.jpg" alt="" class="enlargePic">
        </div>
    </div>
    <script>
        var leftBox = document.querySelector('.leftBox')  //左边盒子
        var rightBox = document.querySelector('.rightBox')  //右边盒子
        var mask = document.getElementById('mask')  //遮罩
        var rightImage = document.querySelector('.enlargePic')  //右边的大图
        leftBox.addEventListener('mouseenter',function(){//显示遮罩和右边的盒子
            mask.style.display = 'block'   
            rightBox.style.display='block'
        })
        leftBox.addEventListener('mousemove',function(e){
            var e = e || window.event
            var left = e.pageX - leftBox.offsetLeft - parseInt(mask.offsetWidth/2)   //mask相对父亲的偏移量
            var top = e.pageY - leftBox.offsetTop - parseInt(mask.offsetHeight/2)
            var leftMove,topMove;         //右边大图片将要移动的距离
            var maxX = leftBox.offsetWidth - mask.offsetWidth  //遮罩移动的最大宽度
            var maxY = leftBox.offsetHeight - mask.offsetHeight 
            if(left<=0){     //遮罩移动到盒子边界时，鼠标可以继续滑，遮罩留在边界
                mask.style.left = '0'
                leftMove = 0
            }else if(left>=maxX){
                mask.style.left = maxX+'px'
                leftMove = maxX
            }else{
                mask.style.left = left+'px'
                leftMove  = left
            }
            if(top<=0){  
                mask.style.top = '0'
                topMove = 0
            }else if(top>=maxY){
                mask.style.top = maxY+'px'
                topMove = maxY
            }else{
                mask.style.top = top+'px'
                topMove  = top
            }
            rightImage.style.left = -2*leftMove+'px'
            rightImage.style.top = -2*topMove+'px'
        })
        leftBox.addEventListener('mouseleave',function(){
            mask.style.display = 'none'
            rightBox.style.display='none'
        })
    </script>
</body>
</html>